<template>
  <div>
    <el-form ref="ruleFormRef" :model="skuForm" label-width="auto">
      <el-form-item label="SKU名称" prop="name">
        <el-input v-model="skuForm.name" />
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input-number
          v-model="skuForm.price"
          :min="1"
          :max="10000"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item label="重量" prop="weight">
        <el-input-number
          v-model="skuForm.weight"
          :min="1"
          :max="10"
          :precision="2"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="skuForm.description" type="textarea" />
      </el-form-item>
      <el-form-item label="销售属性" prop="filedAndValueList">
        <template v-for="attrName in attrNameList" :key="attrName.id">
          <span>{{ attrName.name }}</span>
          <el-select
            v-model="attrNameAndValueMap[attrName.id!]"
            :placeholder="`请选择${attrName.name}`"
            style="width: 200px; margin: 0 20px 0 5px"
          >
            <el-option
              v-for="attrNameValue in attrName.valueList"
              :key="attrNameValue.id"
              :label="attrNameValue.name"
              :value="attrNameValue.id"
            />
          </el-select>
        </template>
      </el-form-item>
      <el-form-item label="默认销售图片" prop="imageUrl">
        <el-table
          :data="imageList"
          ref="ImageTableRef"
          border
          style="margin-bottom: 20px"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
            :selectable="() => false"
          />
          <el-table-column label="销售图片" align="center">
            <template #="{ row }">
              <div
                style="
                  width: 100%;
                  height: 200px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <img :src="row.url" alt="" style="height: 100%" />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template #="{ row }">
              <el-button
                type="primary"
                icon="Setting"
                @click="setDefaultImage(row)"
                >设置为默认图片</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-form-item>
          <el-button type="primary" @click="submitForm"> 确定 </el-button>
          <el-button @click="cancelForm">取消</el-button>
        </el-form-item>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { rqaAttrNameList } from '@/api/product/attr'
import type { AttrNameData } from '@/api/product/attr/types'
import { reqSaveSku } from '@/api/product/spu'
import type { SkuData } from '@/api/product/spu/type'
import { ElMessage, type TableInstance } from 'element-plus'
import { ref } from 'vue'

// 表单数据
const skuForm = ref<SkuData>({} as any)

// 页面数据
const attrNameList = ref<AttrNameData[]>()
const attrNameAndValueMap = ref<{ [key: number]: number }>({})
const imageList = ref<{ url: string }[]>([])

const initSkuForm = async (skuData: SkuData) => {
  // 深度拷贝数据
  skuForm.value = JSON.parse(JSON.stringify(skuData))
  attrNameList.value = (await rqaAttrNameList(skuData.attrId)).data || []
  if (skuData.imageList) {
    imageList.value = skuData.imageList!.map((item) => ({ url: item }))
  }
}
defineExpose({ initSkuForm })

const ImageTableRef = ref<TableInstance>()
const setDefaultImage = (row: { url: string }) => {
  // 清除所有已勾选行
  ImageTableRef.value!.clearSelection()
  // 勾选当前行
  ImageTableRef.value!.toggleRowSelection(row, undefined, true)
  // 设置当前图片为默认图片
  skuForm.value.imageUrl = row.url
}

const emit = defineEmits(['submit', 'cancel'])
const submitForm = async () => {
  const reponse = await reqSaveSku(skuForm.value)
  if (reponse.code === 200) {
    ElMessage.success('新增SKU成功！')
    emit('submit')
  } else {
    ElMessage.error('新增SKU失败！')
  }
}
const cancelForm = () => {
  emit('cancel')
}
</script>
<script lang="ts">
export default {
  name: 'SkuForm',
}
</script>
<style scoped></style>
